coverimage.js ➔ setImageSize - Code Metrics - Inspection of "Makes jquery dep explicit" - thisislawatts/coverimage - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( af2b22...774afd )

by LA

created 2017-02-08 08:18 UTC

coverimage.js ➔ setImageSize A

↳ Parent: CoverImage.constructor

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
cc	1
c	1
b	0
f	0
nc	1
nop	0
dl	0
loc	18
rs	9.4285

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
if (a > 0)
    b = 42;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var CoverImage = function () {
	function CoverImage($el, cb) {
		_classCallCheck(this, CoverImage);

		var _this = this;

		_this.$el = $el ? jQuery($el) : jQuery(window);
		_this.$img = _this.getElementForSizing();
		_this.disableOnMobile = _this.$el.data('cover-image-mobile') === false;
		_this.cb = cb || function () {
			//DEBUG console.log("Default callback");
		};
		_this.positioning = {
			x: 0.5,
			y: 0.5
		};
		_this.options = {
			parallax: _this.$el.data('coverImageParallax') === ''
		};

		if (!_this.$img) {
			console.log('Error:', 'no image found', _this.$img);

			return;
		}

		_this.imageWidth = _this.$img.attr('width');
		_this.imageHeight = _this.$img.attr('height');

		// If the image doesn't have harcoded width|height
		// attributes then load the image to calculate
		// the dimensions
		if (!_this.imageWidth || !_this.imageHeight) {
			console.log('No dimensions found. Generating image');
			_this.img = new Image();

			_this.img.src = _this.$img.attr('src');

			_this.imageWidth = _this.img.width;
			_this.imageHeight = _this.img.height;
		}

		if (_this.disableOnMobile && window.innerWidth < 480) {
			return;
		}

		_this.elementDimensions = {
			height: _this.$el.outerHeight(),
			width: _this.$el.outerWidth()
		};

		_this.$el.css({
			overflow: 'hidden',
			position: 'relative'
		});

		if (!_this.$img.length) {

			// TODO: Implement load
			setTimeout(function () {
				new CoverImage(_this.$el);

			}, 1000);
		} else {
			_this.resizeImage();
		}

		_this.$img.one('load', function () {
			console.log('Image loaded:', 'resize');

			_this.resizeImage();
		});

		$(window).on('resize', function () {
			_this.resizeImage();
		});

		$(window).on('ci.resize', function () {
			_this.resizeImage();
		});

		if (_this.options.parallax) {
			_this.draw();
		}
	}

	/**
  * Parallax FX
  *
  */


	_createClass(CoverImage, [{
		key: 'draw',
		value: function draw() {

			var _this = this;
			var friction = 0.5;
			var imageOffsetX = document.body.scrollTop * friction;
			var imageOffsetY = document.body.scrollTop * friction;
			var maximumMovementY = (_this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y;
			var maximumMovementX = (_this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x;

			if (maximumMovementX > 0) {
				if (imageOffsetX < maximumMovementX) {
					// console.log('New position:', maximumMovementX - imageOffsetX);
					_this.$img.css({
						'transform': 'translateX(' + (maximumMovementX - imageOffsetX) + 'px)'
					});
				}
			} else {
				if (imageOffsetY < maximumMovementY) {
					_this.$img.css('transform', 'translateY(' + (maximumMovementY - imageOffsetY) + 'px)');
				}
			}

			window.requestAnimationFrame(function () {
				_this.draw();
			});
		}
	}, {
		key: 'getElementForSizing',
		value: function getElementForSizing() {
			var _this = this;
			var selector = _this.$el.data('coverImageEl');

			if (selector) {

				console.log('Element selector Present', _this.$el.find(selector));


				return _this.$el.find(selector) ? _this.$el.find(selector) : _this.$el.find('img');
			}

			return _this.$el.find('img').first();
		}
	}, {
		key: 'resizeImage',
		value: function resizeImage() {
			var _this = this;
			var dimensions = _this.coverDimensions(_this.imageWidth, _this.imageHeight, _this.$el.outerWidth(), _this.$el.outerHeight());

			_this.imageDimensions = dimensions;

			if (isNaN(dimensions.width)) {
				console.log('Failed to calculate image sizes.');

			}

			_this.setImageSize();
		}
	}, {
		key: 'setImageSize',
		value: function setImageSize() {
			var _this = this;

			_this.$img.attr({
				'width': _this.imageDimensions.width,
				'height': _this.imageDimensions.height
			}).css({
				'position': 'absolute',
				'width': _this.imageDimensions.width,
				'height': _this.imageDimensions.height,
				'transform': _this.getTransform((_this.$el.width() - _this.imageDimensions.width) * _this.positioning.y, (_this.$el.outerHeight() - _this.imageDimensions.height) * _this.positioning.x),
				'max-width': 'none'
			}).data('resrc-width', _this.imageDimensions.width);

			_this.$img.addClass('ci--sized');

			_this.cb();
		}
	}, {
		key: 'getTransform',
		value: function getTransform(x, y) {
			return 'translate3d(' + x + 'px,' + y + 'px,0)';
		}
	}, {
		key: 'coverDimensions',
		value: function coverDimensions(child_w, child_h, container_w, container_h) {
			var scale_factor = this.max(container_w / child_w, container_h / child_h);

			return {
				width: Math.ceil(child_w * scale_factor),
				height: Math.ceil(child_h * scale_factor)
			};
		}
	}, {
		key: 'containDimensions',
		value: function containDimensions(child_w, child_h, container_w, container_h) {
			var scale_factor = this.min(container_w / child_w, container_h / child_h);

			return {
				width: child_w * scale_factor,
				height: child_h * scale_factor
			};
		}
	}, {
		key: 'min',
		value: function min(a, b) {
			return a > b ? b : a;
		}
	}, {
		key: 'max',
		value: function max(a, b) {
			return a > b ? a : b;
		}
	}]);

	return CoverImage;
}();

var elems = document.body.querySelectorAll('[data-cover-image]');

elems.forEach(function (el) {
	new CoverImage(jQuery(el));

});

1		'use strict';
2
3		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
		0 ignored issues – show Coding Style Best Practice introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
4
5		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
6
7		var CoverImage = function () {
8		function CoverImage($el, cb) {
9		_classCallCheck(this, CoverImage);
10
11		var _this = this;
12
13		_this.$el = $el ? jQuery($el) : jQuery(window);
14		_this.$img = _this.getElementForSizing();
15		_this.disableOnMobile = _this.$el.data('cover-image-mobile') === false;
16		_this.cb = cb \|\| function () {
17		//DEBUG console.log("Default callback");
18		};
19		_this.positioning = {
20		x: 0.5,
21		y: 0.5
22		};
23		_this.options = {
24		parallax: _this.$el.data('coverImageParallax') === ''
25		};
26
27		if (!_this.$img) {
28		console.log('Error:', 'no image found', _this.$img);
		0 ignored issues – show Debugging Code introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
29		return;
30		}
31
32		_this.imageWidth = _this.$img.attr('width');
33		_this.imageHeight = _this.$img.attr('height');
34
35		// If the image doesn't have harcoded width\|height
36		// attributes then load the image to calculate
37		// the dimensions
38		if (!_this.imageWidth \|\| !_this.imageHeight) {
39		console.log('No dimensions found. Generating image');
40		_this.img = new Image();
		1 ignored issue – show Bug introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report The variable `Image` seems to be never declared. If this is a global, consider adding a `/** global: Image */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
41		_this.img.src = _this.$img.attr('src');
42
43		_this.imageWidth = _this.img.width;
44		_this.imageHeight = _this.img.height;
45		}
46
47		if (_this.disableOnMobile && window.innerWidth < 480) {
48		return;
49		}
50
51		_this.elementDimensions = {
52		height: _this.$el.outerHeight(),
53		width: _this.$el.outerWidth()
54		};
55
56		_this.$el.css({
57		overflow: 'hidden',
58		position: 'relative'
59		});
60
61		if (!_this.$img.length) {
62
63		// TODO: Implement load
64		setTimeout(function () {
65		new CoverImage(_this.$el);
		0 ignored issues – show Unused Code Best Practice introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report The object created with `new CoverImage(_this.$el)` is not used but discarded. Consider invoking another function instead of a constructor if you are doing this purely for side effects. Loading history...
66		}, 1000);
67		} else {
68		_this.resizeImage();
69		}
70
71		_this.$img.one('load', function () {
72		console.log('Image loaded:', 'resize');
		0 ignored issues – show Debugging Code introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
73		_this.resizeImage();
74		});
75
76		$(window).on('resize', function () {
77		_this.resizeImage();
78		});
79
80		$(window).on('ci.resize', function () {
81		_this.resizeImage();
82		});
83
84		if (_this.options.parallax) {
85		_this.draw();
86		}
87		}
88
89		/**
90		* Parallax FX
91		*
92		*/
93
94
95		_createClass(CoverImage, [{
96		key: 'draw',
97	View Code Duplication	value: function draw() {
		0 ignored issues – show Duplication introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
98		var _this = this;
99		var friction = 0.5;
100		var imageOffsetX = document.body.scrollTop * friction;
101		var imageOffsetY = document.body.scrollTop * friction;
102		var maximumMovementY = (_this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y;
103		var maximumMovementX = (_this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x;
104
105		if (maximumMovementX > 0) {
106		if (imageOffsetX < maximumMovementX) {
107		// console.log('New position:', maximumMovementX - imageOffsetX);
108		_this.$img.css({
109		'transform': 'translateX(' + (maximumMovementX - imageOffsetX) + 'px)'
110		});
111		}
112		} else {
113		if (imageOffsetY < maximumMovementY) {
114		_this.$img.css('transform', 'translateY(' + (maximumMovementY - imageOffsetY) + 'px)');
115		}
116		}
117
118		window.requestAnimationFrame(function () {
119		_this.draw();
120		});
121		}
122		}, {
123		key: 'getElementForSizing',
124		value: function getElementForSizing() {
125		var _this = this;
126		var selector = _this.$el.data('coverImageEl');
127
128		if (selector) {
129
130		console.log('Element selector Present', _this.$el.find(selector));
		0 ignored issues – show Debugging Code introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
131
132		return _this.$el.find(selector) ? _this.$el.find(selector) : _this.$el.find('img');
133		}
134
135		return _this.$el.find('img').first();
136		}
137		}, {
138		key: 'resizeImage',
139		value: function resizeImage() {
140		var _this = this;
141		var dimensions = _this.coverDimensions(_this.imageWidth, _this.imageHeight, _this.$el.outerWidth(), _this.$el.outerHeight());
142
143		_this.imageDimensions = dimensions;
144
145		if (isNaN(dimensions.width)) {
146		console.log('Failed to calculate image sizes.');
		0 ignored issues – show Debugging Code introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
147		}
148
149		_this.setImageSize();
150		}
151		}, {
152		key: 'setImageSize',
153		value: function setImageSize() {
154		var _this = this;
155
156		_this.$img.attr({
157		'width': _this.imageDimensions.width,
158		'height': _this.imageDimensions.height
159		}).css({
160		'position': 'absolute',
161		'width': _this.imageDimensions.width,
162		'height': _this.imageDimensions.height,
163		'transform': _this.getTransform((_this.$el.width() - _this.imageDimensions.width) * _this.positioning.y, (_this.$el.outerHeight() - _this.imageDimensions.height) * _this.positioning.x),
164		'max-width': 'none'
165		}).data('resrc-width', _this.imageDimensions.width);
166
167		_this.$img.addClass('ci--sized');
168
169		_this.cb();
170		}
171		}, {
172		key: 'getTransform',
173		value: function getTransform(x, y) {
174		return 'translate3d(' + x + 'px,' + y + 'px,0)';
175		}
176		}, {
177		key: 'coverDimensions',
178		value: function coverDimensions(child_w, child_h, container_w, container_h) {
179		var scale_factor = this.max(container_w / child_w, container_h / child_h);
180
181		return {
182		width: Math.ceil(child_w * scale_factor),
183		height: Math.ceil(child_h * scale_factor)
184		};
185		}
186		}, {
187		key: 'containDimensions',
188		value: function containDimensions(child_w, child_h, container_w, container_h) {
189		var scale_factor = this.min(container_w / child_w, container_h / child_h);
190
191		return {
192		width: child_w * scale_factor,
193		height: child_h * scale_factor
194		};
195		}
196		}, {
197		key: 'min',
198		value: function min(a, b) {
199		return a > b ? b : a;
200		}
201		}, {
202		key: 'max',
203		value: function max(a, b) {
204		return a > b ? a : b;
205		}
206		}]);
207
208		return CoverImage;
209		}();
210
211		var elems = document.body.querySelectorAll('[data-cover-image]');
212
213		elems.forEach(function (el) {
214		new CoverImage(jQuery(el));
		0 ignored issues – show Unused Code Best Practice introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report The object created with `new CoverImage(jQuery(el))` is not used but discarded. Consider invoking another function instead of a constructor if you are doing this purely for side effects. Loading history...
215		});

thisislawatts / coverimage

Push — master ( af2b22...774afd )

coverimage.js ➔ setImageSize A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like